<script setup lang="ts">
	import { computed, ref, unref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { useLocation } from '@/hooks/web/useLocation'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { useUserStore } from '@/stores/user'
	import { transferOrderList } from '@/package_tms/api/Home'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const { getLocation } = useLocation()

	onShow(() => {
		paging.value?.reload()
	})

	const useTabs = () => {
		const currentIndex = ref(0)

		const tabsColumns = computed(() => {
			return [
				{
					name: '待审核',
					badge: { value: taskInfo.value.undone },
					id: 1
				},
				{
					name: '已完成',
					badge: { value: taskInfo.value.done },
					id: 2
				}
			]
		})

		const taskInfo = ref({
			undone: 0,
			done: 0
		})

		const currentTabsItem = computed(() => {
			return unref(tabsColumns)[unref(currentIndex)]
		})

		return {
			currentIndex,
			tabsColumns,
			currentTabsItem,
			taskInfo
		}
	}
	const { tabsColumns, currentIndex, taskInfo, currentTabsItem } = useTabs()

	const paging = ref<ZPagingInstance>()
	const useCURD = () => {
		const dataList = ref([])
		const query = ref({
			order_no: '',
		})

		const getList : ZPagingEvent.Query = async (page, limit) => {
			const params = { page, limit, status: unref(currentTabsItem).id, ...query.value }
			try {
				const res = await transferOrderList(params)
				unref(currentTabsItem).id === 1 ? taskInfo.value.undone = res.data.wait_num : taskInfo.value.done = res.data.success_num
				paging.value?.complete([...res.data.data])
			} catch (err) {
				showNotify({
					type: 'error',
					message: err.msg
				})
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction,
			query
		}
	}
	const { dataList, getList, searchAction, query } = useCURD()


	// 查看详情
	const toStoreDetail = (item) => {
		route({
			url: 'package_tms/pages/transfer/transDetail',
			params: {
				id: item.id,
				name: item.name
			}
		})
	}
	// 回库新增
	const toPage = () => {
		route({
			url: 'package_tms/pages/transfer/createTransfer'
		})
	}
	// tabs切换
	const onSearch = () => {
		query.value.order_no = ''
		paging.value?.reload()

	}
	// 返回
	const leftClick = () => {
		uni.reLaunch({
			url: `/pages/Workbench/index`
		})
	}
	// 手机物理返回
	const isShow = ref(true)
	const beforeleave = () => {
		isShow.value = false
		uni.reLaunch({
			url: `/pages/Workbench/index`
		})
	}
</script>

<template>
	<up-navbar title="调拨回库" placeholder @leftClick="leftClick"></up-navbar>
	<view v-if="isShow">
		<page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
	</view>
	<view class="content">
		<view class="user_info_wrap">
			<view class="search-wrap">
				<up-search v-model="query.order_no" @search="searchAction" @custom="searchAction" @clear="searchAction"
					showAction actionText="搜索" animation shape="square" bgColor="rgba(243, 242, 245, 1)"></up-search>
			</view>
			<view class="user-info">
				<view class="avatar-wrap">
					<up-tabs v-model:current="currentIndex" @change="onSearch" :list="tabsColumns"
						:itemStyle="{ height: '104rpx', fontSize: '28rpx' }"
						:activeStyle="{ color: 'rgba(54, 116, 242, 1)' }" lineWidth="104rpx"
						lineColor=" rgba(54, 116, 242, 1)">
						<template #right>
							<view style="padding-left: 4px;" @click="toPage">
								<up-button text="新增调拨回库" shape="circle" color="rgba(55, 131, 252, 1)"></up-button>
								<!-- <up-icon name="plus" size="21" bold></up-icon> -->
							</view>
						</template>
					</up-tabs>
				</view>
			</view>
		</view>
		<view class="main">
			<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" height="calc(100vh - 400rpx)">
				<view class="main-box" v-for="(item,index) in dataList" :key="index">
					<view class="main-header">
						<view class="header-name">{{item.order_no}}
						</view>
						<view class="header-right">
						</view>
					</view>
					<view class="mian-address">
						<view class="address-name">{{item.create_time}}</view>
						<view class="distance-name">{{item.remark}}</view>
					</view>
					<view class="dd-box">
						<view class="dd">
							<view class="dd-img">
								<image style="width: 40rpx;height: 40rpx;" src="/package_tms/static/icon/icon1.png">
								</image>
							</view>
							<text class="dd-name">仓库：</text>
							<text style="font-weight: 700;color: rgba(245, 99, 81, 1);">{{item.warehouse?.name}}</text>
						</view>
						<view class="dd">
							<view class="dd-img">
								<image style="width: 40rpx;height: 40rpx;" src="/package_tms/static/icon/icon4.png">
								</image>
							</view>
							<text class="dd-name">调拨类型：</text>
							<text style="font-weight: 700;color: rgba(245, 99, 81, 1);">{{item.transfer_mode === 1 ? '车销提货' : '车销回库'}}</text>
						</view>
						<view class="dd">
							<view class="dd-img">
								<image style="width: 40rpx;height: 40rpx;" src="/package_tms/static/icon/icon4.png">
								</image>
							</view>
							<text class="dd-name">备注：</text>
							<text style="font-weight: 700;color: rgba(245, 99, 81, 1);">{{item.remark}}</text>
						</view>
						
					</view>
					<view style="margin-top: 40rpx;">
						<up-button text="查看详情" shape="circle" @click="toStoreDetail(item)"
							color="rgba(55, 131, 252, 1)"></up-button>
					</view>
				</view>
			</z-paging>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		background: rgba(242, 243, 245, 1);
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS 11.2及以上 */

	}

	.user_info_wrap {
		@include flex();
		flex-direction: column;
		justify-content: flex-end;
		gap: 20rpx;
		width: 100%;
		height: 209rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx 0rpx;
		box-sizing: border-box;

		.search-wrap {
			display: flex;
			align-items: center;
			width: 100%;
			height: 64rpx;
			border-radius: 20rpx;
			padding: 10rpx;
			background: rgba(243, 242, 245, 1);
		}

	}

	.main {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS 11.2及以上 */

		.main-box {
			width: 702rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.main-header {
				display: flex;
				justify-content: space-between;

				.header-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
				}

				.header-right {
					display: flex;

					.right-img {
						width: 34rpx;
						height: 34rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}

					.right-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(55, 131, 252, 1);
					}
				}
			}

			.mian-address {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.address-name {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
				}

				.distance-name {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(156, 154, 161, 1);
				}
			}

			.dd-box {
				width: 654rpx;
				border-radius: 6rpx;
				margin-top: 40rpx;
				padding: 30rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(242, 243, 245, 1) 0%, rgba(242, 243, 245, 0) 100%);

				.dd {
					display: flex;
					margin-bottom: 20rpx;

					.dd-img {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}

					.dd-name {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
					}
				}
			}
		}
	}
</style>